<template>
    <div class="api-layout">
        <treeIndex :style="{'width' : width + 'px'}"></treeIndex>
        <contentIndex class="content-layout" :style="{'left' : width + 1 + 'px'}"></contentIndex>
        <div class="moveBar" :style="{'left' : width - 2 + 'px'}" @mousedown="mousedown($event)"></div>
    </div>
</template>
<script>
import treeIndex from './tree/index'
import contentIndex from './content/index';
export default {
    components: {
        treeIndex,
        contentIndex
    },
    data() {
        return {
            width: 250,
        }
    },
    methods: {
        mousedown() {
            document.body.style.cursor = 'col-resize';
            document.onmousemove = (event) => {
                let left = event.clientX - 70;
                if (left < 250) {
                    left = 250
                } else if (left > document.body.clientWidth - 500) {
                    left = document.body.clientWidth - 500
                }
                this.width = left;
            };
            document.onmouseup = () => {
                document.body.style.cursor = '';
                document.onmousemove = null;
                document.onmouseup = null;
            }
        },
    },
}
</script>